<template>
  <div class="app-container">
    <div class="block">
      <el-tabs type="card" v-model="actvieGroup" @tab-click="changeGroup">
        <el-tab-pane
          v-for="(item, index) in cfgGroups"
          :key="index"
          :label="item.name"
          :name="item.value"
        >
          {{ item.content }}
        </el-tab-pane>
      </el-tabs>
      <div v-show="actvieGroup !== 'all'">
        <el-form label-width="160px">
          <el-form-item
            :key="index"
            v-for="(item, index) in cfgList"
            :label="item.cfgDesc"
          >
            <el-input type="textarea" v-model="cfg[item.cfgName]"></el-input>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" @click="saveGroup">{{
              "提交"
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="actvieGroup === 'all'">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="listQuery.cfgName"
              size="mini"
              :placeholder="'参数名'"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="listQuery.cfgValue"
              size="mini"
              :placeholder="'参数值'"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-search"
              @click.native="search"
              >{{ "搜索" }}
            </el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-refresh"
              @click.native="reset"
              >{{ "重置" }}
            </el-button>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="24">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-plus"
              @click.native="add"
              >{{ "添加" }}
            </el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click.native="edit"
              >{{ "编辑" }}
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click.native="remove"
              >{{ "删除" }}
            </el-button>
            <el-button
              type="info"
              size="mini"
              icon="el-icon-document"
              @click.native="exportXls"
              >{{ "导出" }}
            </el-button>
          </el-col>
        </el-row>
        <el-table
          :data="list"
          v-loading="listLoading"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          @current-change="handleCurrentChange"
        >
        <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column label="ID">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column :label="'参数名'">
            <template slot-scope="scope">
              {{ scope.row.cfgName }}
            </template>
          </el-table-column>
          <el-table-column :label="'参数值'">
            <template slot-scope="scope">
              {{ scope.row.cfgValue }}
            </template>
          </el-table-column>
          <el-table-column :label="'备注'">
            <template slot-scope="scope">
              {{ scope.row.cfgDesc }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="listQuery.limit"
          :total="total"
          :current-page.sync="listQuery.page"
          @size-change="changeSize"
          @current-change="fetchPage"
          @prev-click="fetchPrev"
          @next-click="fetchNext"
        >
        </el-pagination>
      </div>
      <el-dialog :title="formTitle" :visible.sync="formVisible" width="70%">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="' 参数名'" prop="cfgName">
                <el-input v-model="form.cfgName" minlength="1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="' 参数值'" prop="cfgValue">
                <el-input v-model="form.cfgValue" minlength="1"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="'备注'">
                <el-input v-model="form.cfgDesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="save_item">{{
              "提交"
            }}</el-button>
            <el-button @click.native="formVisible = false">{{
              "取消"
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
//引入组件
import {
  remove,
  getList,
  save,
  exportXls,
  getByPrefix,
  saveGroup
} from "@/api/sysytem_cfg";
export default {
  name: "ParameterManagement",
  data() {
    return {
      formVisible: false,
      formTitle: "添加参数",
      isAdd: true,
      form: {
        id: "",
        cfgName: "",
        cfgValue: "",
        cfgDesc: ""
      },
      listQuery: {
        page: 1,
        limit: 20,
        cfgName: "",
        cfgValue: ""
      },
      total: 0,
      list: null,
      listLoading: true,
      selRow: {},
      actvieGroup: "all",
      cfgGroups: [
        { name: "全部配置", value: "all" },
        { name: "系统配置", value: "system" },
        { name: "公众号配置", value: "weixin" },
        { name: "消息配置", value: "api.tencent.sms" }
      ],
      cfgList: [],
      cfg: {}
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  computed: {
    rules() {
      return {
        cfgName: [
          { required: true, message: " 参数名" + "不能为空", trigger: "blur" },
          {
            min: 1,
            max: 128,
            message: " 参数名" + "长度在1-128位",
            trigger: "blur"
          }
        ],
        cfgValue: [
          { required: true, message: " 参数值" + "不能为空", trigger: "blur" },
          { min: 1, message: " 参数值" + "至少为1位", trigger: "blur" }
        ]
      };
    }
  },

  mounted() {
    let _self = this;
    _self.fetchData();
  },
  methods: {
    // 取数据
    fetchData() {
      let _self = this;
      _self.listLoading = true;
      console.log(_self.listQuery)
      getList(_self.listQuery).then(res => {
        if (res.code == 20000) {
          _self.list=[],
          _self.list = res.data.records;
          _self.listLoading = false;
          _self.total = res.data.total;
        }
      });
    },
    // 搜索
    search() {
      let _self = this;
      _self.listQuery.cfgName=_self.listQuery.cfgName.trim();
      _self.listQuery.cfgValue=_self.listQuery.cfgValue.trim();
      if (_self.listQuery.cfgName == "" || _self.listQuery.cfgValue == "") {
        _self.$message.error("参数名和参数值不能为空");
      } else {
        _self.listQuery.page = 1;
        _self.fetchData();
      }
    },
    // 重置
    reset() {
      let _self = this;
      _self.listQuery.cfgName = "";
      _self.listQuery.cfgValue = "";
      _self.listQuery.page = 1;
      _self.fetchData();
    },
    handleFilter() {
      let _self = this;
      _self.listQuery.page = 1;
      //   _self.getList();
      //   _self.fetchData();
    },
    handleClose() {},
    // 后一页
    fetchNext() {
      let _self = this;
      _self.listQuery.page = _self.listQuery.page + 1;
      _self.fetchData();
    },
    // 前一页
    fetchPrev() {
      let _self = this;
      _self.listQuery.page = _self.listQuery.page - 1;
      _self.fetchData();
    },
    // 页数
    fetchPage(page) {
      let _self = this;
      _self.listQuery.page = page;
      _self.fetchData();
    },
    // 改数据显示条数
    changeSize(limit) {
      let _self = this;
      _self.listQuery.limit = limit;
      _self.fetchData();
    },
    handleCurrentChange(currentRow) {
      let _self = this;
      _self.selRow = currentRow;
    },
    resetForm() {
      let _self = this;
      _self.form = {
        id: "",
        cfgName: "",
        cfgValue: "",
        cfgDesc: ""
      };
    },
    // 添加
    add() {
      let _self = this;
      _self.resetForm();
      _self.formTitle = "参数添加";
      _self.formVisible = true;
      _self.isAdd = true;
    },
    // 提交
    save_item() {
      let _self = this;
      _self.$refs["form"].validate(valid => {
        if (valid) {
          save({
            id: _self.form.id,
            cfgName: _self.form.cfgName,
            cfgValue: _self.form.cfgValue,
            cfgDesc: _self.form.cfgDesc
          }).then(res => {
            _self.$message({
              message: "提交成功",
              type: "success"
            });
            _self.fetchData();
            _self.formVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    // 检查是否有选择
    checkSel() {
      let _self = this;
      if (_self.selRow && _self.selRow.id) {
        return true;
      }
      _self.$message({
        message: "必须选择一个",
        type: "warning"
      });
      return false;
    },
    // 编辑
    edit() {
      let _self = this;
      if (_self.checkSel()) {
        _self.isAdd = false;
        _self.form = _self.selRow;
        _self.formTitle = "编辑";
        _self.formVisible = true;
      }
    },
    // 删除
    remove() {
      let _self = this;
      if (_self.checkSel()) {
        var id = _self.selRow.id;
        _self.$confirm("确认删除", "我再想想", {
            confirmButtonText: "提交",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            let _self=this;
            console.log("123142")
            remove(id).then(res => {
              _self.$message({
              message: "删除成功",
              type: "success"
            });
            });
          })
          .catch(() => {
            _self.fetchData();
          });
      }
    },
    // 导出
    exportXls() {
      let _self = this;
      exportXls(_self.listQuery).then(res => {
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([res], { type: "application/vnd.ms-excel" }),
            "导出文件.xls"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([res], { type: "application/vnd.ms-excel" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "导出文件.xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },
    changeGroup(tab, event) {
      let _self = this;
      if (tab.name === "all") {
        return;
      }
      getByPrefix({ cfgGroup: tab.name }).then(res => {
        _self.cfgList = res.data.list;
        _self.cfg = res.data.map;
      });
    },
    saveGroup() {
      let _self = this;
      saveGroup({ json: JSON.stringify(_self.cfg) }).then(res => {
        _self.$message({
          message: "成功",
          type: "success"
        });
        _self.fetchData();
      });
    }
  }
};
</script>
<style scoped lang="">
.bannerinput {
  margin: 10px 10px;
  width: 400px;
}
.bannertable {
  margin: 10px;
}
.bannerBtn {
  margin: 10px;
}
.el-image {
  width: 200px;
  height: 100px;
}
.elForm .el-form-item {
  margin: 5px 0;
}
</style>
